<script>
import { h, defineComponent, ref } from "vue";
import { RouterLink, RouterView } from "vue-router";
import { useMessage, useDialog } from "naive-ui";
import { useUserInfo } from "@/stores/user.js";
import { useRouter } from "vue-router";
import axios from "axios";
import { NIcon } from "naive-ui";
import {
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon,
} from "@vicons/ionicons5";

const renderIcon = (icon) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};

const store = useUserInfo();

const menuOptions = [
  {
    label: "用户管理",
    key: "user-label",
    href: "/userManager",
  },
  {
    label: "轮播图管理",
    key: "swiper-label",
    href: "/swiper",
  },
  {
    label: "商品管理",
    key: "product-label",
    href: "/product",
  },
  {
    label: "订单管理",
    key: "order-label",
    href: "/order",
  },
];

export default defineComponent({
  components: {
    UserIcon
  },

  setup() {
    const dialog = useDialog();
    const router = useRouter();
    const showModalRef = ref(false);
    const cureentRow = ref({});
    const formRef = ref();

    window.$message = useMessage();

    return {
      formRef,
      cureentRow,
      showModal: showModalRef,
      options: [
        {
          label: "修改密码",
          key: "editProfile",
          icon: renderIcon(EditIcon),
        },
        {
          label: "退出登录",
          key: "logout",
          icon: renderIcon(LogoutIcon),
        },
      ],

      handleButtonClick() {
        dialog.info({
          title: "提示",
          content: "你确定要退出登录吗？",
          positiveText: "确定",
          negativeText: "取消",
          maskClosable: false,
          onPositiveClick: () => {
            axios({
              method: "post",
              url: "/userInfo/logout",
            }).then(function (response) {
              store.setToken("");
              $message.success("已成功退出登录");
              router.push("/login");
            });
          },
        });
      },

      handleSelect(key) {
        if (key === "logout") {
          dialog.info({
            title: "提示",
            content: "你确定要退出登录吗？",
            positiveText: "确定",
            negativeText: "取消",
            maskClosable: false,
            onPositiveClick: () => {
              axios({
                method: "post",
                url: "/userInfo/logout",
              }).then(function (response) {
                store.setToken("");
                $message.success("已成功退出登录");
                router.push("/login");
              });
            },
          });
        } else {
          showModalRef.value = true;
        }
      },

      save(row) {
        formRef.value.validate((errors) => {
          if (!errors) {
            console.log(row)
            if (row.newPassword !== row.confirmPassword) {
              $message.error("确认密码与新密码不一致");
            } else {
              showModalRef.value = false;
              axios({
                method: "post",
                url: "/userInfo/updatePassword",
                data: row,
              }).then(function (response) {
                if (response.data.code === 200) {
                  store.setToken("");
                  $message.success("请重新登录");
                  router.push("/login");
                }
              });
            }
          }
        });
      },
      rules: {
        oldPassword: {
          required: true,
          trigger: "input",
          message: "请输入原密码",
        },
        phone: {
          required: true,
          trigger: "input",
          message: "请输入账号",
        },
        newPassword: {
          required: true,
          trigger: "input",
          message: "请输入新密码",
        },
        confirmPassword: {
          required: true,
          trigger: "input",
          message: "请确认新密码",
        },
      },

      menuOptions,
      renderMenuLabel(option) {
        if ("href" in option) {
          return h(
            RouterLink,
            { to: option.href },
            { default: () => option.label }
          );
        }
        return option.label;
      },
    };
  },
});
</script>

<template>
  <div class="topdiv">
    <span class="topspan">后台管理系统</span>
    <n-space>
      <n-dropdown :options="options" :show-arrow="true" @select="handleSelect">
        <n-button text class="logout">
          <template #icon>
            <n-icon size="30" color="#fff">
              <user-icon />
            </n-icon>
          </template>
        </n-button>
      </n-dropdown>
    </n-space>
  </div>

  <n-modal
    v-model:show="showModal"
    :mask-closable="false"
    preset="dialog"
    :show-icon="false"
    :closable="false"
    style="height: 340px"
  >
    <n-form
      ref="formRef"
      :rules="rules"
      :model="cureentRow"
      label-placement="left"
      label-width="auto"
      require-mark-placement="right-hanging"
      :style="{
        maxWidth: '640px',
      }"
    >
      <n-form-item label="账号" path="phone">
        <n-input v-model:value="cureentRow.phone" placeholder="请输入" />
      </n-form-item>
      <n-form-item label="原密码" path="oldPassword">
        <n-input
          v-model:value="cureentRow.oldPassword"
          type="password"
          show-password-on="mousedown"
          placeholder="请输入"
        />
      </n-form-item>
      <n-form-item label="新密码" path="newPassword">
        <n-input
          v-model:value="cureentRow.newPassword"
          placeholder="请输入"
          type="password"
          show-password-on="mousedown"
        />
      </n-form-item>
      <n-form-item label="确认新密码" path="confirmPassword">
        <n-input
          v-model:value="cureentRow.confirmPassword"
          placeholder="请输入"
          type="password"
          show-password-on="mousedown"
        />
      </n-form-item>
      <div style="display: flex; justify-content: flex-end; margin-top: 20px">
        <n-button style="margin-right: 20px" @click="showModal = false">
          取消
        </n-button>
        <n-button type="primary" @click="save(cureentRow)"> 保存 </n-button>
      </div>
    </n-form>
  </n-modal>

  <n-space vertical>
    <n-layout has-sider>
      <n-layout-sider
        bordered
        content-style="padding: 24px; box-shadow: 2px 0 8px #1d23290d;"
        width="auto"
      >
        <n-menu
          default-value="user-label"
          :options="menuOptions"
          :render-label="renderMenuLabel"
        />
      </n-layout-sider>
      <n-layout>
        <RouterView />
      </n-layout>
    </n-layout>
  </n-space>
</template>

<style>
.topdiv {
  position: relative;
}
.logout {
  position: absolute;
  right: 50px;
  top: 30px;
  background-color: #112648;
}
</style>
